.flex_draft {


  .flex_child {
    // animation: slide-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1; // 移入
    border: 1px dashed #e2e0e0;
    margin: 0 -1px -1px 0;
  }

  .child_chosen {
    // 鼠标按下的样式
    border: 1px dashed #4395ff !important;
    z-index: 3;
  }

  .child_drag {
    // 拖动时,附着鼠标的元素样式
    border: 1px dashed #4395ff !important;
    transform: scale(1.1);
  }

  .child_ghost {
    // 拖动时,占位元素的样式
    opacity: 0.5;
  }

  .drag_tool{
    position: absolute;
    top: 0;
    right: 0;
    background-color: #1890ff;

    i{
      &:hover{
        color: white
      }
    }
  }


  div[class~='active'] {
    // 选中的样式
    border: 1px solid #1890ff;
    background-color: #cde3ff;
    z-index: 2;
  }

  :global(.spare_dragin){
    // 从待选区托过来的样式
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-top: 56px solid #cde3ff;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }

  @for $i from 1 through 24{
    &:global(.default-span-#{$i}>.spare_dragin) {
      width: calc(100% / 24 * #{$i})
    }
  }
}

